<!DOCTYPE html>
<html lang="en">

<head>
    <title>泵房详情</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/pumpDetail.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/echarts.js"></script>
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">泵房监管</div>
            <div class="app_headerRight">
                <span class="iconfont icon-elipsis"></span>
            </div>
        </div>
        <div class="app_conter">
            <div class="app_box1">
                <div class="app_box1Top">
                    <div class="title">长沙天心区南苑小区1#</div>
                    <div class="tab">
                        <div>
                            <span class="iconfont icon-xinhao"></span>在线
                        </div>
                    </div>
                    <div class="tips">详细地址：湖南省长沙市天心区芙蓉南路南苑小区1栋30号</div>
                </div>
                <div class="app_box1Bottom">
                    <nut-row>
                        <nut-col :span="8">
                            <div class="flex-num">744</div>
                            <div class="flex-tips str">今日供水(m³)</div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-num">243</div>
                            <div class="flex-tips str">今日用电(kW-h)</div>
                        </nut-col>
                        <nut-col :span="8">
                            <div class="flex-num">543</div>
                            <div class="flex-tips str">顿水电耗(kW-h/m³)</div>
                        </nut-col>
                    </nut-row>
                </div>
            </div>
            <nut-row>
                <nut-col :span="6">
                    <div @click="goRemoteControl">
                        <div class="tabs_icon">
                            <span class="iconfont icon-tiaodu"></span>
                        </div>
                        <div class="tabs_txt str">远程调度</div>
                    </div>
                </nut-col>
                <nut-col :span="6">
                    <div @click="show2 = true">
                        <div class="tabs_icon">
                            <span class="iconfont icon-menjin"></span>
                        </div>
                        <div class="tabs_txt str">智能门禁</div>
                    </div>
                </nut-col>
                <nut-col :span="6">
                    <div @click="goVideoPage">
                        <div class="tabs_icon">
                            <span class="iconfont icon-jiankong"></span>
                        </div>
                        <div class="tabs_txt str">视频监控</div>
                    </div>
                </nut-col>
                <nut-col :span="6">
                    <div @click="goPump3D">
                        <div class="tabs_icon">
                            <span class="iconfont icon-3D1"></span>
                        </div>
                        <div class="tabs_txt str">3D泵房</div>
                    </div>
                </nut-col>
            </nut-row>
            <div class="app_main1">
                <div class="app_main1Title">运行监控</div>
                <div class="app_main1Echarts" id="app_main1Echarts"></div>
                <nut-row :style="{height: rowHeight}">
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">进水压力(MPa)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">进水流量(m³/h)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">累计进水量(m³)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">水箱液位(m)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">出水压力(MPa)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">出水流量(m³/h)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">累计出水量(m³)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">出水浊度(NTU)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">出水余氯(mg/L)</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="flex_num">0.00</div>
                        <div class="flex_txt">出水pH</div>
                    </nut-col>
                </nut-row>
                <div class="app_main1Arrow">
                    <span @click="isMoreToggle" :style="{transform: TransformR}"
                        class="iconfont icon-arrow-down-bold"></span>
                </div>
            </div>
            <div class="app_main2">
                <nut-tab @tab-switch="tabSwitch" :def-index="defIndex" :line-width="lineWidth" :is-scroll="true"
                    :def-index="5">
                    <nut-tab-panel tab-title="泵房详情">
                        <div class="app_main2List1">
                            <div class="txt str">泵房名称：农行后苑. </div>
                            <div class="txt str">监测点编号：20210010101</div>
                            <div class="txt str">供水设备：XMZH-0000003.</div>
                            <div class="txt str">水泵型号：XMZH-2022-0406</div>
                            <div class="txt str">设备尺寸：1200*3200*4560</div>
                            <div class="txt str">水泵台数：3</div>
                            <div class="txt str">总功率：200kW</div>
                            <div class="txt str">功率：200kW</div>
                            <div class="txt str">电流：12A</div>
                            <div class="txt str">流量：120m³/h</div>
                            <div class="txt str">供应商：威派格</div>
                            <div class="txt str">联系人：张三</div>
                            <div class="txt str">联系电话：18273110656</div>
                            <div class="txt str">安装日期：2018-09-19</div>
                            <div class="txt str">质保：3年</div>
                        </div>
                    </nut-tab-panel>
                    <nut-tab-panel tab-title="报警记录">
                        <div class="app_mainList_item" v-for="(item,index) in 4">
                            <div class="app_mainList_itemTitle">李治</div>
                            <div class="app_mainList_itemTime">2022/01/12 16:00</div>
                            <div class="app_mainList_itemName">ALCW智能型无负压供水设备变频器故障</div>
                        </div>
                    </nut-tab-panel>
                    <nut-tab-panel tab-title="保养记录">
                        <div class="app_mainList_item" v-for="(item,index) in 4">
                            <div class="app_mainList_itemTitle">李治</div>
                            <div class="app_mainList_itemTime">2022/01/12 16:00</div>
                            <div class="app_mainList_itemName">ALCW智能型无负压供水设备变频器故障</div>
                        </div>
                    </nut-tab-panel>
                    <nut-tab-panel tab-title="巡检记录">
                        <div class="app_mainList_item" v-for="(item,index) in 4">
                            <div class="app_mainList_itemTitle">李治</div>
                            <div class="app_mainList_itemTime">2022/01/12 16:00</div>
                            <div class="app_mainList_itemName">ALCW智能型无负压供水设备变频器故障</div>
                        </div>
                    </nut-tab-panel>
                    <nut-tab-panel tab-title="维修记录">
                        <div class="app_mainList_item" v-for="(item,index) in 4">
                            <div class="app_mainList_itemTitle">李治</div>
                            <div class="app_mainList_itemTime">2022/01/12 16:00</div>
                            <div class="app_mainList_itemName">ALCW智能型无负压供水设备变频器故障</div>
                        </div>
                    </nut-tab-panel>
                </nut-tab>
            </div>
        </div>
        <div class="app_footer">
            <div>导航</div>
            <div>报修</div>
        </div>
        <!-- 远程控制  弹窗 -->
        <nut-popup v-model="show1" position="left" :style="{ height: '100vh',width: '100vw' }">
            <div class="popupTitle">
                <div class="left" @click="show1 = false"><span class="iconfont icon-close-bold"></span></div>
                <div class="title">远程控制</div>
            </div>
            <div class="popupList"></div>
            <div class="popupBottom">
                <div @click="show1 = false">取消</div>
                <div @click="show1 = false">应用</div>
            </div>
        </nut-popup>
        <!-- 智能门禁  弹窗 -->
        <nut-popup v-model="show2" round position="bottom" :style="{ height: 'auto' }">
            <div class="popupTitle">
                <div class="left" @click="show2 = false"><span class="iconfont icon-close-bold"></span></div>
                <div class="title">智能门禁</div>
            </div>
            <div class="popupItem">
                <div class="left">
                    <div class="icon">
                        <span class="iconfont icon-suo"></span>
                    </div>
                    <div class="txt">智能门禁</div>
                </div>
                <div class="right">
                    <nut-switch :active="switchActive"></nut-switch>
                </div>
            </div>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                state: 1,
                defIndex: 0,
                valueInfo: 40,
                lineWidth: 44,
                show1: false,
                show2: false,
                switchActive: false,
                valueInfocolor1: "rgba(57, 103, 253, 0.25)",
                valueInfocolor2: "#2E5BFF",
                valueinfocontent: "运行正常",
                rowHeight: '60px!important',
                isMore: false,
                TransformR: 'rotate(0deg)'
            },
            mounted() {
                this.getEchartsInfo()
            },
            watch: {
                state(val) {
                    if (val == 1) {
                        this.valueInfocolor1 = "rgba(57, 103, 253, 0.25)"
                        this.valueInfocolor2 = "#2E5BFF"
                        this.valueinfocontent = "运行正常"
                        this.getEchartsInfo()
                    } else {
                        this.valueInfocolor1 = "rgba(255, 67, 6, 0.25)"
                        this.valueInfocolor2 = "#FF4306"
                        this.valueinfocontent = "运行异常"
                        this.getEchartsInfo()
                    }
                },
                isMore(val) {
                    if (val == true) {
                        this.rowHeight = 'auto'
                        this.TransformR = 'rotate(180deg)'
                    } else {
                        this.rowHeight = '60px'
                        this.TransformR = 'rotate(0deg)'
                    }
                }
            },
            methods: {
                goVideoPage(){
                    window.location.href = './videoPage.html'
                },
                goRemoteControl(){
                    window.location.href = './remoteControl.html'
                },
                goPump3D(){
                    window.location.href = './pump3D.html'
                },
                back() {
                    window.history.go(-1)
                },
                isMoreToggle() {
                    this.isMore = !this.isMore
                },
                tabSwitch(index, event) {
                    this.defIndex = index
                    console.log(index + '--' + event.target);
                },
                //仪表盘canvas
                getEchartsInfo() {
                    var that = this
                    var dom = document.getElementById('app_main1Echarts');
                    var myChart = echarts.init(dom);
                    const chartObserver = new ResizeObserver(() => {
                        myChart.resize();
                    });
                    chartObserver.observe(dom);
                    var option;
                    option = {
                        series: [{
                            //类型
                            type: 'gauge',
                            //半径
                            radius: 85,
                            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                            startAngle: 360,
                            //结束角度。
                            endAngle: 0,
                            splitNumber: 40, //仪表盘刻度的分割段数。
                            //仪表盘轴线相关配置。
                            axisLine: {
                                lineStyle: {
                                    width: 0,
                                    color: [
                                        [that.valueInfo, that.valueInfocolor1], // 底色
                                    ]
                                }
                            },
                            //刻度样式。
                            splitLine: {
                                show: false, //是否显示分隔线。
                            },
                            axisTick: {
                                show: false,
                            },
                            //分隔线样式。
                            splitLine: {
                                length: 16,
                                lineStyle: {
                                    width: 3,
                                    color: 'auto'
                                }
                            },
                            //刻度标签。
                            axisLabel: {
                                show: false,
                                textStyle: { // 属性lineStyle控制线条样式
                                    fontWeight: 'bolder',
                                    fontSize: 10,
                                }
                            },
                            //仪表盘指针。
                            pointer: {
                                //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                                show: false,
                                //指针长度
                                width: 0,
                            },
                            anchor: {
                                show: false,
                                showAbove: false,
                                size: 1,
                                itemStyle: {
                                    borderWidth: 0
                                }
                            },
                            title: {
                                show: true,
                                textStyle: {
                                    fontSize: "30px",
                                    fontWeight: "400",
                                    color: "#8798AD"
                                }
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: [0, 0],
                                fontSize: "20px",
                                fontWeight: 'normal',
                                color: that.valueInfocolor2,
                                formatter: that.valueinfocontent
                            },
                            data: [{
                                value: "运行正常",
                            }]
                        }]
                    };

                    option && myChart.setOption(option);
                },
            }
        })
    </script>
</body>

</html>